<template>
  <div>
    <el-card class="app-page">
      <div class="content">
        <TablePaging
          :table-list="deviceList"
          border
          :table-column="deviceTableColumn"
          :table-buttons="deviceTableButtons"
          :table-btn-width="140"
          :table-paging="deviceTablePaging"
          :table-total="deviceTableTotal"
          @pagingChange="handlePaginChange"
        />
      </div>
    </el-card>
    <device-update
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="() => (dialogVisible = false)"
      :handle-submit="handleModalSubmit"
      :form-data="modalFormData"
      :device-code-disabled="deviceCodeDisabled"
    />
  </div>
</template>

<script>
import { fetchDeviceDelete } from '@/api/basicinfo/device'
import {
  sysconfigFindPage,
  sysconfigUpdate,
  sysconfigGet
} from '@/api/systemManage'
import { TablePaging } from '@/components'
import { tableColumn } from './config'
import DeviceUpdate from './update'

export default {
  name: 'Device',
  components: { TablePaging, DeviceUpdate },
  data() {
    return {
      queryFormData: {},
      deviceTableColumn: tableColumn(1, 10),
      deviceList: [],
      deviceTableButtons: [
        // 设备表操作按钮
        // {
        //   name: '浏览',
        //   click: ''
        // },
        {
          name: '编辑',
          click: this.handleEdit
        }
        // {
        //   name: '删除',
        //   click: this.handleDelete
        // }
      ],

      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false // 设备号是否禁止修改
    }
  },
  created() {
    this.postFindPage()
  },
  methods: {
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handleAdd() {
      // 新增
      this._setModalData()
    },

    handleEdit(id) {
      // 修改
      sysconfigGet({ id }).then(res => {
        this._setModalData('编辑', true, res)
      })
    },

    handleDelete(id) {
      this.$confirm('是否删除此设备?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.postDeviceDelete(id)
        })
        .catch(() => {})
    },

    handleModalSubmit(values) {
      // 弹窗表单提交
      if (values.id) {
        this.postDeviceUpdate(values)
        return false
      }
      this.postDeviceAdd(values)
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },

    _setModalData(title = '添加', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },

    postFindPage() {
      // 获取列表
      sysconfigFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postDeviceAdd(values) {
      // 设备新增
      sysconfigUpdate(values).then(res => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.postFindPage()
      })
    },

    postDeviceUpdate(values) {
      // 设备更新
      sysconfigUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.postFindPage()
      })
    },

    postDeviceDelete(id) {
      // 设备删除
      fetchDeviceDelete({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .app-page {
  // min-height: 100vh;
// }
</style>
